<template>
    <div class="quotes-create">
        <el-form :model="form" ref="mform" :rules="rules" class="form mp-form"
                 :label-width="formLabelWidth" size="small">
            <el-form-item label="消息类型" prop="type">
                <el-radio-group v-model="form.type" :disabled="isView">
                    <el-radio :label="2">全员公告</el-radio>
                    <el-radio :label="1">指定人消息</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="指定人员" prop="users" v-if="form.type === 1">
                <el-button type="success" size="mini" icon="el-icon-plus" circle
                           v-if="!isView"
                           @click="handleShowAdd()"></el-button>

                <el-tag
                    v-for="u in users"
                    :key="u.user_id"
                    :closable="!isView"
                    @close="handleRemoveUser(u)" style="margin-right: 10px;">
                    {{u.user_name}}
                </el-tag>
            </el-form-item>

            <el-form-item label="是否紧急" prop="level">
                <el-radio-group v-model="form.level" :disabled="isView">
                    <el-radio :label="1">普通</el-radio>
                    <el-radio :label="9">紧急</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="标题" prop="title">
                <el-input v-model="form.title" autocomplete="off" style="width:280px;" :disabled="isView"></el-input>
            </el-form-item>
            <el-form-item label="内容" prop="content">
                <el-input v-model="form.content"
                          type="textarea"
                          autocomplete="off"
                          style="width:280px;"
                          :rows="4"
                          :disabled="isView"></el-input>
            </el-form-item>
            <el-form-item v-if="isView">
                <el-button type="primary" @click="close()" size="default">确 定</el-button>
            </el-form-item>
            <el-form-item v-else>
                <el-button type="primary" @click="submit()" size="default">确 定</el-button>
                <el-button @click="close()" size="default">取 消</el-button>
            </el-form-item>
        </el-form>

        <el-dialog :title="winName" :visible.sync="showUsers" top="60px" width="650px" :append-to-body="true">
            <c-users @close="closeWin" :show.sync="showUsers" :users="users"></c-users>
        </el-dialog>
    </div>
</template>

<script>
    import { mapState, mapActions } from 'vuex';
    import axios from 'axios';
    import cUsers from '../common/users';

    export default {
        props: [ 'show', 'modId', 'isView' ],
        data() {
            return {
                formLabelWidth: '120px',
                winName: '选择消息接收人',
                loading: false,
                showUsers: false,
                users: [],
                form: {
                    type: 2,
                    level: 1,
                    content: '',
                    title: '',
                },
                rules: {
                    title: [
                        { required: true, message: '请输入内容', trigger: 'blur' }
                    ],
                    content: [
                        { required: true, message: '请输入内容', trigger: 'blur' }
                    ]
                },
            }
        },
        components: {
            cUsers
        },
        created: function () {
            // this.pid = this.$route.query.pid;
        },
        mounted: function () {
            this.init();
        },
        watch: {
            '$route' (to, from) {
                // this.groupId = this.$route.params.groupId;
                // this.refresh();
            },
            'show'(val) {
                if(val) {
                    this.init();
                }
            },
        },
        filters: {
            adminTypeLabel( type ) {
                if( type == 'SUPER') {
                    return '超级管理员';
                } else if(type == '_SUPER') {
                    return '系统管理员';
                } else {
                    return '管理员';
                }
            }
        },
        computed: {
            ...mapState([
                'loginUser',
            ]),
        },
        methods: {
            ...mapActions([
            ]),
            async init() {

                this.form.type = 2;
                this.form.level = 1;
                this.form.type = 2;
                this.form.content = '';
                this.form.title = "";
                this.users = [];

                this.$refs.mform && this.$refs.mform.resetFields();

                if(this.modId) {
                    let data = await this.$japi.message.getDetail(this.modId);

                    this.form = data;

                    if(data.users) {
                        this.users = _.map(data.users, d => d && d.user);
                    }
                }
            },
            submit() {
                this.$refs.mform.validate((valid) => {
                    if (valid) {
                        this._submit();
                    } else {
                        return false;
                    }
                });
            },
            async _submit() {
                let param = {};

                this.loading = true;

                let users = _.map(this.users, u => {
                    return {
                        user_id: u.user_id
                    }
                });
                if(this.form.type == 1) {
                    param.users = users;
                }

                let data = await this.$japi.message.create(_.defaults(param, this.form));

                this.loading = false;

                if(data) {
                    this.close(true);
                    this.$message('操作成功！');
                }
            },
            close(flag) {
                this.$emit('close', flag);
            },
            handleShowAdd() {
                this.showUsers = true;
            },
            closeWin(selected){

                // this.showStudent = false;

                if(!selected || !selected.length) {
                    return this.showUsers = false;
                }

                this.appendUsers(selected);
                this.showUsers = false;
            },
            appendUsers(users) {

//                let nts = _.map(users, t => {
//                    return {
//                        user_id: t.user_id,
//                        teacher_name: t.teacher_name,
//                        subject_id: t.subject_id
//                    }
//                });

                this.users = _.concat(this.users, users)
            },
            handleRemoveUser(u) {
                this.users.splice(this.users.indexOf(u), 1);
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
    .quotes-create {
        display:flex;
        justify-content: space-around;
        /*min-width: 800px;*/

        .form {
            /*width:500px;*/
            width:100%;
        }
        .preview-wrap {
            width:380px;
            height:500px;
            overflow: hidden;
            padding:5px;
        }
        .preview {
            position: absolute;
            top:-10px;
            right:0px;
            width:375px;
            height:667px;
            background: #FFF;
            box-shadow: 0 0 5px #CCC;
            transform: scale(0.8);
            /*transform-origin:100% 0;*/

            .bg {
                background: #666;
                background-size: cover;
                background-position: center;
            }
            .pa {
                position: absolute;
            }
            .txt {
                color: #FFF;
                width: 100%;
                text-align: center;
            }
            .time {
                border: 1px solid #FFF;
            }
            .time-sep {
                border-top: 1px solid #FFF;
            }
            .avatar {
                border-radius: 50%;
                overflow: hidden;
                transform: scale(1);

                img {
                    width:100%;
                }
            }
            .qrcode {
                img {
                    width:100%;
                }
            }
            .name {
                color: #333;
            }
            .title {
                color: #2BA245;
            }
            .sub-title {
                color: #999;
            }
            .txt-wisdom {
                width: 100%;
                text-align: center;
                color: #FFF;
                /*left: 50%;
                transform: translateX(-50%);*/
            }
            .author-sep {
                border-top: 1px solid #FFF;
            }
        }
    }
</style>
